<template>
  <view class="content">
    <scroll-view class="scroll-area" scroll-y>
      <view class="form-container">
        <view class="form-item">
          <text class="label">选择分类</text>
          <view class="category-input-group">
            <input class="input category-input" v-model="newCategory" placeholder="请输入新分类名称" />
            <button class="add-category-btn" @tap="addCategory">添加分类</button>
          </view>
          <view class="category-list">
            <view v-for="(category, index) in categories" :key="category.id"
              :class="['category-item', categoryIndex === index ? 'active' : '']" @tap="selectCategory(index)">
              <input class="category-name-input" v-if="editingCategoryId === category.id" v-model="editingCategoryName"
                @blur="updateCategoryName(category.id)" @confirm="updateCategoryName(category.id)" :focus="true" />
              <text v-else @dblclick="startEditCategory(category)">{{category.name}}</text>
              <text class="delete-category" @tap.stop="deleteCategory(category.id)">×</text>
            </view>
          </view>
        </view>

        <view class="form-item">
          <text class="label">题目标题</text>
          <textarea class="title-textarea" v-model="title" placeholder="请输入题目标题" :maxlength="-1"
            :show-confirm-bar="false" :auto-height="false" :cursor-spacing="100" />
        </view>

        <view class="form-item">
          <text class="label">题目内容</text>
          <view class="blank-list">
            <view v-for="(blank, index) in blanks" :key="index" class="blank-item">
              <textarea class="textarea content-textarea blank-item-content" v-model="blank.beforeText"
                :placeholder="index === 0 ? '请输入第一段文本' : '请输入填空后的文本'" maxlength="-1" />
              <textarea class="textarea content-textarea blank-answer blank-item-content" v-model="blank.answer"
                :placeholder="'请输入第' + (index + 1) + '个填空答案'" maxlength="-1" />
              <textarea v-if="index === blanks.length - 1" class="textarea content-textarea blank-item-content"
                v-model="lastText" placeholder="请输入最后一段文本" maxlength="-1" />
            </view>
          </view>
          <view class="blank-actions">
            <button class="action-btn add" @tap="addBlank">添加填空</button>
            <button v-if="blanks.length > 1" class="action-btn remove" @tap="removeBlank">删除填空</button>
          </view>
        </view>

        <view class="form-item">
          <text class="label">答案解析</text>
          <textarea class="textarea" v-model="explanation" placeholder="请输入答案解析" />
        </view>

        <button class="submit-btn" @tap="saveQuestion">保存题目</button>
      </view>

      <!-- 题目列表 -->
      <view class="question-list">
        <view class="list-header">
          <view class="list-title">
            <text>最新添加的题目</text>
            <text class="sub-title">（显示最新{{maxDisplayQuestions}}道）</text>
          </view>
          <view class="view-all" @tap="showAllQuestionsList" v-if="categoryQuestions.length > maxDisplayQuestions">
            <text>查看全部</text>
            <text class="count">({{categoryQuestions.length}}题)</text>
          </view>
        </view>
        <view v-for="question in displayQuestions" :key="question.id" class="question-item">
          <view class="question-header">
            <view class="question-text">
              <view class="question-title">{{question.title}}</view>
              <text v-for="(content, index) in processContent(question.content)" :key="index">
                {{content}}
                <text v-if="index < question.blanks.length" class="highlight">【{{question.blanks[index]}}】</text>
              </text>
              <view class="question-time">{{formatTime(question.id)}}</view>
            </view>
            <view class="question-actions">
              <view class="action-btns-column">
                <button class="action-btn edit" @tap="editQuestion(question)">编辑</button>
                <button class="action-btn delete" @tap="deleteQuestion(question.id)">删除</button>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 添加全部题目的弹出层，只在需要时显示 -->
      <view class="popup-mask" v-if="showAllList" @tap="closeAllQuestionsList" @touchmove.stop.prevent></view>
      <view class="custom-popup" v-if="showAllList" @touchmove.stop.prevent>
        <view class="all-questions-popup">
          <view class="popup-header">
            <text class="popup-title">{{categories[categoryIndex]?.name}}全部题目</text>
            <text class="close-btn" @tap="closeAllQuestionsList">×</text>
          </view>
          <view class="search-area">
            <input class="search-input" v-model="searchKeyword" placeholder="输入题号或关键词搜索..." @input="handleSearch" />
          </view>
          <scroll-view class="questions-list" scroll-y @scroll.stop>
            <view v-for="(question, index) in filteredQuestions" :key="question.id" class="question-item">
              <view class="question-header">
                <view class="question-text">
                  <view class="question-index">第{{
                    categoryQuestions.findIndex(q => q.id === question.id) + 1
                    }}题</view>
                  <view class="question-title">{{question.title}}</view>
                  <text v-for="(content, index) in processContent(question.content)" :key="index">
                    {{content}}
                    <text v-if="index < question.blanks.length" class="highlight">【{{question.blanks[index]}}】</text>
                  </text>
                  <view class="question-time">{{formatTime(question.id)}}</view>
                </view>
                <view class="question-actions">
                  <view class="action-btns-column">
                    <button class="action-btn edit" @tap="editQuestion(question)">编辑</button>
                    <button class="action-btn delete" @tap="deleteQuestion(question.id)">删除</button>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </scroll-view>

    <!-- 固定在底部的操作栏 -->
    <view class="fixed-bottom">
      <view class="action-bar">
        <button class="action-btn export" @tap="exportQuestions">导出题库到剪贴板</button>
        <button class="action-btn import" @tap="importFromClipboard">从剪贴板导入题库</button>
        <button class="action-btn import-json" @tap="importFromJson">从JSON导入题库</button>
      </view>
    </view>
  </view>
</template>

<script>
import { questionBank } from '@/store/questions.js'

export default {
  data() {
    return {
      categories: [],
      categoryIndex: 0,
      title: '',
      blanks: [{ beforeText: '', answer: '' }],
      lastText: '',
      explanation: '',
      categoryQuestions: [],
      newCategory: '',
      editingCategoryId: null,
      editingCategoryName: '',
      isEditing: false,
      editingQuestionId: null,
      maxDisplayQuestions: 3,  // 最大显示题目数量
      showAllList: false,
      isPc: false,  // 添加平台判断标志
      searchKeyword: '',
      highlightedIndex: -1,
    }
  },
  computed: {
    displayQuestions() {
      // 只显示最新的三道题目
      return this.categoryQuestions.slice(-this.maxDisplayQuestions).reverse()
    },
    filteredQuestions() {
      if (!this.searchKeyword) {
        return this.categoryQuestions
      }

      const keyword = this.searchKeyword.toLowerCase()

      // 检查是否是数字（题号）
      const questionNumber = parseInt(keyword)
      if (!isNaN(questionNumber)) {
        // 如果输入的是数字，检查是否在有效范围
        if (questionNumber > 0 && questionNumber <= this.categoryQuestions.length) {
          // 返回从开始到目标题目的所有题目，保持原有顺序
          return this.categoryQuestions.filter((_, index) => index === questionNumber - 1)
        }
      }

      // 如果不是数字或者数字超出范围，按关键词搜索
      return this.categoryQuestions.filter(question => {
        const titleMatch = question.title.toLowerCase().includes(keyword)
        const contentMatch = question.content.some(content =>
          content.toLowerCase().includes(keyword)
        )
        const blanksMatch = question.blanks.some(blank =>
          blank.toLowerCase().includes(keyword)
        )
        return titleMatch || contentMatch || blanksMatch
      })
    },
  },
  onLoad() {
    // 检测平台
    const systemInfo = uni.getSystemInfoSync()
    this.isPc = systemInfo.platform === 'windows' || systemInfo.platform === 'mac'
    this.categories = questionBank.getCategories()
    this.loadCategoryQuestions()
  },
  onShow() {
    // 每次显示页面时重新加载数据
    this.loadCategoryQuestions()
  },
  methods: {
    bindCategoryChange(e) {
      this.categoryIndex = e.detail.value
      this.loadCategoryQuestions()
    },
    loadCategoryQuestions() {
      const categoryId = this.categories[this.categoryIndex]?.id
      if (categoryId) {
        this.categoryQuestions = questionBank.getQuestionsByCategory(categoryId)
      }
    },
    addBlank() {
      this.blanks.push({ beforeText: '', answer: '' })
    },
    removeBlank() {
      if (this.blanks.length > 1) {
        this.blanks.pop()
      }
    },
    saveQuestion() {
      const hasEmptyFields = this.blanks.some(blank =>
        !blank.beforeText || !blank.answer
      ) || !this.lastText || !this.title

      if (hasEmptyFields) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }

      const content = []
      const blanks = []

      this.blanks.forEach(blank => {
        content.push(blank.beforeText.replace(/\n/g, '\\n'))
        blanks.push(blank.answer.trim())
      })
      content.push(this.lastText.replace(/\n/g, '\\n'))

      const newQuestion = {
        id: this.isEditing ? this.editingQuestionId : Date.now(),
        categoryId: this.categories[this.categoryIndex].id,
        title: this.title,
        content,
        blanks,
        explanation: (this.explanation || '暂无解析').replace(/\n/g, '\\n')
      }

      if (this.isEditing) {
        // 使用新的更新方法
        questionBank.updateQuestion(newQuestion)
      } else {
        // 添加新题目
        questionBank.addQuestion(newQuestion)
      }

      this.loadCategoryQuestions()
      this.resetForm()

      uni.showToast({
        title: this.isEditing ? '更新成功' : '添加成功',
        icon: 'success'
      })
    },
    deleteQuestion(questionId) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这道题目吗？',
        success: (res) => {
          if (res.confirm) {
            questionBank.deleteQuestion(questionId)
            this.loadCategoryQuestions()
            if (this.categoryQuestions.length === 0) {
              uni.setStorageSync('currentQuestionIndex', 0)
            }
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
          }
        }
      })
    },
    resetForm() {
      this.blanks = [{ beforeText: '', answer: '' }]
      this.lastText = ''
      this.explanation = ''
      this.title = ''
      this.isEditing = false
      this.editingQuestionId = null
    },
    exportQuestions() {
      const data = {
        questions: questionBank.questions
      }
      const jsonStr = JSON.stringify(data, null, 2)

      uni.setClipboardData({
        data: jsonStr,
        success: () => {
          uni.showToast({
            title: '题库已复制到剪贴板',
            icon: 'success'
          })
        }
      })
    },
    importFromClipboard() {
      uni.showModal({
        title: '导入确认',
        content: '确定要从剪贴板导入题库数据吗？将覆盖当前的题库。',
        success: (res) => {
          if (res.confirm) {
            uni.getClipboardData({
              success: (clipData) => {
                try {
                  console.log('剪贴板数据:', clipData.data)
                  const data = JSON.parse(clipData.data)
                  console.log('解析后的数据:', data)
                  if (data && Array.isArray(data.questions)) {
                    console.log('题目数量:', data.questions.length)
                    // 更新题库
                    questionBank.questions = data.questions
                    // 保存到本地存储
                    uni.setStorageSync('questions', data.questions)
                    // 分类存储
                    questionBank.saveQuestionsByCategory(data.questions)
                    // 重新加载题目列表
                    this.loadCategoryQuestions()

                    uni.showToast({
                      title: '导入成功',
                      icon: 'success'
                    })
                  } else {
                    console.error('数据格式不正确:', data)
                    uni.showToast({
                      title: '数据格式错误，请确保包含questions数组',
                      icon: 'none',
                      duration: 2000
                    })
                  }
                } catch (e) {
                  console.error('解析数据失败:', e)
                  uni.showToast({
                    title: '解析JSON失败，��检查格式',
                    icon: 'none',
                    duration: 2000
                  })
                }
              },
              fail: (err) => {
                console.error('获取剪贴板失败:', err)
                uni.showToast({
                  title: '无法读取剪贴板，请重试',
                  icon: 'none',
                  duration: 2000
                })
              }
            })
          }
        }
      })
    },
    addCategory() {
      if (!this.newCategory.trim()) {
        uni.showToast({
          title: '请输入分类名称',
          icon: 'none'
        })
        return
      }

      const newCategory = {
        id: Date.now(),
        name: this.newCategory.trim()
      }

      questionBank.addCategory(newCategory)
      this.categories = questionBank.getCategories()
      this.newCategory = ''

      uni.showToast({
        title: '添加成功',
        icon: 'success'
      })
    },
    deleteCategory(categoryId) {
      uni.showModal({
        title: '确认删除',
        content: '删除分类的同时删除该分类下的所有题目，确定要删除吗？',
        success: (res) => {
          if (res.confirm) {
            questionBank.deleteCategory(categoryId)
            this.categories = questionBank.getCategories()
            this.categoryIndex = 0
            this.loadCategoryQuestions()

            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
          }
        }
      })
    },
    selectCategory(index) {
      this.categoryIndex = index
      this.loadCategoryQuestions()
    },
    startEditCategory(category) {
      this.editingCategoryId = category.id
      this.editingCategoryName = category.name
    },
    updateCategoryName(categoryId) {
      if (this.editingCategoryName.trim()) {
        // 更新分类名称
        questionBank.updateCategoryName(categoryId, this.editingCategoryName.trim())
        this.categories = questionBank.getCategories()
      }
      // 退出编辑状态
      this.editingCategoryId = null
      this.editingCategoryName = ''
    },
    importFromJson() {
      // 检测平台
      const platform = uni.getSystemInfoSync().platform
      if (platform === 'windows' || platform === 'mac') {
        // PC端使用文件选择
        wx.chooseMessageFile({
          count: 1,
          type: 'file',
          extension: ['.json'],
          success: (res) => {
            const filePath = res.tempFiles[0].path
            // 读取文件内容
            wx.getFileSystemManager().readFile({
              filePath: filePath,
              encoding: 'utf-8',
              success: (res) => {
                try {
                  const data = JSON.parse(res.data)
                  if (data && Array.isArray(data.questions)) {
                    // 更新题库
                    questionBank.questions = data.questions
                    // 保存到本地存储
                    uni.setStorageSync('questions', data.questions)
                    // 重新加载题目列表
                    this.loadCategoryQuestions()

                    uni.showToast({
                      title: '导入成功',
                      icon: 'success'
                    })
                  } else {
                    uni.showToast({
                      title: 'JSON格式错误',
                      icon: 'none'
                    })
                  }
                } catch (e) {
                  uni.showToast({
                    title: '解析JSON失败',
                    icon: 'none'
                  })
                }
              },
              fail: () => {
                uni.showToast({
                  title: '读取文件失败',
                  icon: 'none'
                })
              }
            })
          },
          fail: () => {
            uni.showToast({
              title: '选择文件失��',
              icon: 'none'
            })
          }
        })
      } else {
        // 移动端使用剪贴板入
        uni.showModal({
          title: '导入说明',
          content: '1. 打开JSON文件\n2. 全选文件内容复制\n3. 点击确定导入',
          success: (res) => {
            if (res.confirm) {
              uni.getClipboardData({
                success: (res) => {
                  try {
                    const data = JSON.parse(res.data)
                    if (data && Array.isArray(data.questions)) {
                      questionBank.questions = data.questions
                      uni.setStorageSync('questions', data.questions)
                      this.loadCategoryQuestions()
                      uni.showToast({
                        title: '导入成功',
                        icon: 'success'
                      })
                    } else {
                      uni.showToast({
                        title: 'JSON格式错误',
                        icon: 'none'
                      })
                    }
                  } catch (e) {
                    uni.showToast({
                      title: '解析JSON失败',
                      icon: 'none'
                    })
                  }
                },
                fail: () => {
                  uni.showToast({
                    title: '获取剪贴板失败',
                    icon: 'none'
                  })
                }
              })
            }
          }
        })
      }
    },
    editQuestion(question) {
      // 如果是从弹层点击编辑，先关闭
      if (this.showAllList) {
        this.closeAllQuestionsList()
      }

      // 将题目数据填充到表单
      this.title = question.title
      this.blanks = question.content.slice(0, -1).map((text, index) => ({
        beforeText: text.replace(/\\n/g, '\n'),  // 将存储的\n转换回真实换行符
        answer: question.blanks[index]
      }))
      this.lastText = question.content[question.content.length - 1].replace(/\\n/g, '\n')
      this.explanation = question.explanation.replace(/\\n/g, '\n')
      this.categoryIndex = this.categories.findIndex(c => c.id === question.categoryId)

      // 设置编辑状态
      this.isEditing = true
      this.editingQuestionId = question.id

      // 滚动到表单位置
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
    },
    showAllQuestionsList() {
      this.showAllList = true
    },
    closeAllQuestionsList() {
      this.showAllList = false
    },
    formatTime(timestamp) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    // 处理内容中的换行符
    processContent(content) {
      return content.map(text => text.replace(/\\n/g, '\n'))
    },
    handleSearch() {
      const questionNumber = parseInt(this.searchKeyword)
      if (!isNaN(questionNumber)) {
        // 如果输入的是数字，检查是否在有效范围内
        if (questionNumber > 0 && questionNumber <= this.categoryQuestions.length) {
          // 使用小程序的选择器API
          const query = uni.createSelectorQuery()
          query.select(`.question-item:nth-child(${questionNumber})`).boundingClientRect()
          query.selectViewport().scrollOffset()
          query.exec((res) => {
            if (res[0]) {
              // 计算要滚动的距离
              const scrollTop = res[0].top + res[1].scrollTop - 100 // 100是顶部预留空间
              // 使用scroll-view的滚动方法
              const scrollView = uni.createSelectorQuery().select('.questions-list')
              scrollView.node((res) => {
                if (res && res.node) {
                  res.node.scrollTo({
                    top: scrollTop,
                    behavior: 'smooth'
                  })
                }
              }).exec()
            }
          })

          // 添加高亮效果
          this.highlightedIndex = questionNumber - 1
          setTimeout(() => {
            this.highlightedIndex = -1 // 3秒后取消高亮
          }, 3000)
        } else {
          // 如果题号超出范围，显示提示
          uni.showToast({
            title: `请输入1-${this.categoryQuestions.length}之间的题号`,
            icon: 'none'
          })
        }
      }
      this.loadCategoryQuestions()
    },
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.scroll-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 优化移动端滚动 */
}

.fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  padding: 15rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  gap: 10rpx;
}

.action-bar .action-btn {
  flex: 1;
  font-size: 26rpx;
  height: 70rpx;
  line-height: 70rpx;
}

.form-container {
  background: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
}

.form-item {
  margin-bottom: 20rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.input,
.picker {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.textarea {
  width: 90%;
  min-height: 40rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  /* height: auto !important; */
  min-height: 50rpx;
  height: 60rpx;
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
}

.submit-btn {
  background: #007AFF;
  color: #fff;
  margin-top: 30rpx;
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  border-radius: 35rpx;
  margin-left: auto;
  padding: 0;
}

.question-list {
  margin-top: 30rpx;
  background: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.list-title {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.sub-title {
  font-size: 24rpx;
  color: #999;
}

.view-all {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8rpx;
}

.count {
  font-size: 24rpx;
  color: #999;
}

.question-item {
  padding: 20rpx;
  border-bottom: 2rpx solid #eee;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20rpx;
}

.question-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  white-space: pre-wrap;
}

.action-btn.delete {
  font-size: 24rpx;
  padding: 0 16rpx;
  display: inline-block;
  /* width: 60rpx; */
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background: #f44336;
  color: #fff;
  border-radius: 25rpx;
}

.blank-list {
  margin: 10rpx 0;
}

.blank-item {
  margin-bottom: 15rpx;
  padding: 15rpx;
  background: #f8f8f8;
  border-radius: 8rpx;
}

.blank-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 15rpx;
  padding: 0 10rpx;
}

.blank-actions .action-btn {
  flex: 1;
  margin: 0 5rpx;
  font-size: 26rpx;
  height: 70rpx;
  line-height: 70rpx;
}

.add {
  background: #4CAF50;
  color: #fff;
}

.remove {
  background: #f44336;
  color: #fff;
}

.highlight {
  color: #007AFF;
  font-weight: bold;
}

.export {
  background: #4CAF50;
  color: #fff;
}

.import {
  background: #2196F3;
  color: #fff;
}

.question-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #333;
}

.category-input-group {
  display: flex;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.category-input {
  flex: 1;
}

.add-category-btn {
  width: 160rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  background: #4CAF50;
  color: #fff;
  border-radius: 40rpx;
  padding: 0;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  margin: -10rpx;
  /* 抵子元素的margin */
}

.category-item {
  padding: 10rpx 30rpx;
  background: #f5f5f5;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #666;
  display: flex;
  align-items: center;
  margin: 10rpx;
}

.category-item.active {
  background: #007AFF;
  color: #fff;
}

.delete-category {
  font-size: 32rpx;
  color: #999;
  padding: 0 10rpx;
}

.category-item.active .delete-category {
  color: rgba(255, 255, 255, 0.8);
}

.category-name-input {
  background: transparent;
  border: none;
  color: inherit;
  font-size: inherit;
  width: 120rpx;
  text-align: center;
}

.import-json {
  background: #FF9800;
  color: #fff;
}

.question-actions {
  display: flex;
  align-items: flex-start;
}

.action-btns-column {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  align-items: flex-end;
}

.action-btn.edit,
.action-btn.delete {
  font-size: 24rpx;
  padding: 0 16rpx;
  display: inline-block;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  color: #fff;
  border-radius: 25rpx;
  min-width: 100rpx;
}

.action-btn.edit {
  background: #2196F3;
}

.action-btn.delete {
  background: #f44336;
}

.content-textarea {
  width: 100%;
  height: 150rpx;
  padding: 15rpx;
  font-size: 28rpx;
  line-height: 1.5;
  white-space: pre-wrap;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  box-sizing: border-box;
  margin-bottom: 15rpx;
}

.all-questions-popup {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  height: 80vh;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #eee;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
  padding: 0 20rpx;
}

.questions-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20rpx;
}

.popup-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
}

.custom-popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  transform: translateY(0);
  transition: transform 0.3s ease;
  max-height: 80vh;
}

.custom-popup.hide {
  transform: translateY(100%);
}

.question-time {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  text-align: right;
}

.question-index {
  font-size: 28rpx;
  color: #666;
  background: #f5f5f5;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  margin-bottom: 10rpx;
  display: inline-block;
}

.search-area {
  padding: 20rpx 30rpx;
  border-bottom: 2rpx solid #eee;
}

.search-input {
  width: 100%;
  height: 70rpx;
  background: #f5f5f5;
  border-radius: 35rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

/* 当没有搜索结果时的提示样式 */
.no-result {
  text-align: center;
  padding: 40rpx;
  color: #999;
  font-size: 28rpx;
}

/* 添加高亮样式用于标记当前题目 */
.question-item.highlight {
  background-color: rgba(0, 122, 255, 0.1);
  border-left: 4rpx solid #007AFF;
}

.title-textarea {
  width: 100%;
  height: 110rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  padding: 15rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  line-height: 1.5;
}
</style>